<template>
  <div class="all">
    <h4>全部课程</h4>
    <van-dropdown-menu>
      <van-dropdown-item
        @change="menuChange1"
        v-model="value1"
        :options="option1"
      />
      <van-dropdown-item
        @change="menuChange2"
        v-model="value2"
        :options="option2"
      />
    </van-dropdown-menu>
    <!-- 正在学习的课程 -->
    <div class="content">
      <ul>
        <li
          @click="todetail(item.id)"
          v-for="(item, index) in list"
          :key="index"
        >
          <span class="title">{{ item.course_classify_title }}</span>
          <p class="desc">{{ item.title }}</p>
          <div class="box">
            <span>系统课</span>
            <span>{{ item.course_count }}课时</span>
          </div>
          <p class="date">
            课程有效期{{ new Date(item.course_validity_date).toLocaleString() }}
          </p>
          <div class="jn">
            <div class="a" v-for="(ite, ind) in item.course_label" :key="ind">
              {{ ite.label_name }}
            </div>
          </div>
          <div class="info">
            <div
              class="box"
              v-for="(it, i) in item.teacher.slice(0, 3)"
              :key="i"
            >
              <img :src="it.avatar" alt="" />
              <span style="background-color: #fff">{{ it.teacher_name }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { toRefs, reactive, onMounted, ref } from 'vue'
import { zhengzaixuexiApi, kecheng } from '../http/api.js'
export default {
  setup(props) {
    const num1 = ref(0)
    const num2 = ref(0)
    const data = reactive({
      list: [],
      option1: [
        { text: `全部课程(${num1.value})`, value: 0, is_free: '' },
        { text: `付费课程(${num1.value})`, value: 1, is_free: 2 },
        { text: `免费课程(${num1.value})`, value: 2, is_free: 1 }
      ],
      option2: [
        { text: `全部状态(${num2.value})`, value: 0, study_status: '' },
        { text: `学习中(${num2.value})`, value: 1, study_status: 1 },
        { text: `已完成(${num2.value})`, value: 2, study_status: 2 },
        { text: `已过期(${num2.value})`, value: 3, study_status: 3 },
        { text: `已收藏(${num2.value})`, value: 4, study_status: 4 }
      ],
      value1: 0,
      value2: 0,
      val1: 0
    })
    onMounted(() => {
      Getzhengzaixuexi()
    })
    const Getzhengzaixuexi = async () => {
      const res = await zhengzaixuexiApi()
      console.log('正在学习的课程', res)
      data.list = res
    }
    const menuChange1 = async (val) => {
      console.log('val', val)
      data.val1 = val
      const res = await kecheng(data.option1[val].is_free)
      console.log('res1', res)
      data.list = res
      let ress = res.length ? res.length : '0'
      num1.value = ress
    }
    const menuChange2 = async (val) => {
      console.log('val', val)
      const res = await kecheng(
        data.option1[data.val1].is_free,
        data.option2[val].study_status
      )
      console.log('res2', res)
      data.list = res
    }
    return {
      ...toRefs(data),
      menuChange1,
      menuChange2
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.all {
  h4 {
    padding: 20px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
  }
}
.content {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    .title {
      font-weight: 600;
      color: #424963;
      font-size: 20px;
    }
    span {
      color: #ccc;
      font-size: 14px;
    }
  }
  ul {
    padding: 20px;
    li {
      min-height: 300px;
      border-radius: 20px;
      background-color: #fff;
      margin: 20px;
      padding: 10px 30px;
      .title {
        background-color: #f15a24;
        color: #fff;
        padding: 6px 20px;
        font-size: 14px;
        border-radius: 20px 0 20px 0;
        margin-left: -28px;
      }
      .desc {
        margin-top: 20px;
        font-size: 15px;
      }
      .box {
        span {
          font-size: 12px;
          margin-right: 10px;
          background-color: #eee;
          padding: 8px 10px;
          color: #666;
        }
      }
      .date {
        margin: 20px 0;
        padding: 0;
        font-size: 12px;
      }
      .jn {
        margin-top: 20px;
        display: flex;
        .a {
          font-size: 12px;
          background-color: #f5f6f8;
          color: #666;
          padding: 5px 10px;
          margin-right: 10px;
        }
      }
      .info {
        display: flex;
        .box {
          display: flex;
          align-items: center;
          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 10px;
          }
          span {
            color: #666;
            font-size: 13px;
            margin-right: 20px;
          }
        }
      }
      .bottom {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        s {
          color: #ccc;
          margin-right: 10px;
          font-size: 14px;
        }
        b {
          color: red;
          font-size: 14px;
        }
        .mianfei {
          color: green;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
